<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="/css/shangjia-ued.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/js/lib/jquery.js"></script>
<script type="text/javascript" src="/js/plugin/idTabs/jquery.idTabs.js"></script>
<script type="text/javascript">
$(function(){
	//demo1
	$("#usual1 ul").idTabs(); 
	
	//demo2
	$("#usual2 ul").idTabs("tabs2").idTabs("!mouseover"); 
})
</script>
<style type="text/css">

</style>
</head>
<body>
<table border="0" class="ued_table_1">
  
  <!--list---------------------------->
  <tr>
    <td class="title" colspan="2">Options</td>
  </tr>
  <tr>
    <td>start<i>(number|string)</i></td>
    <td>默认高亮<br />
例如：$(...).idTabs("#tab1")<br />
默认：$(...).idTabs(0);
  </tr>
  <tr>
    <td>click<i>(function)</i></td>
    <td>回调<br />
例如：<br />
$(...).idTabs(function(id,s){<br />
	id//打印选中ID<br />
	s// object<br />
    s.tab(id)//返回选中tab对象<br />
	s.item(id)//返回选中内容对象<br />
})</td>
  </tr>
  <tr>
    <td>selected<i>(string)</i></td>
    <td>高亮样式<br />
例如：$(...).idTabs(".current")<br />
默认：$(...).idTabs(".selected")</td>
  </tr>
  <tr>
    <td>event<i>(string)</i></td>
    <td>触发事件<br />
例如：$(...).idTabs("!mouseover")<br />
默认：$(...).idTabs("!click")
</td>
  </tr>
    <!--/list----------------------------> 
    <!--list---------------------------->
  <tr>
    <td class="title" colspan="2"> 常用方法 </td>
  </tr>
  <tr>
    <td width="200"><div id="usual1" class="usual">
        <ul>
          <li><a class="selected" href="#tab1">Tab 1</a></li>
          <li><a href="#tab2">Tab 2</a></li>
          <li><a href="#tab3">Tab 3</a></li>
        </ul>
        <div id="tab1">This is tab 1.</div>
        <div id="tab2">More content in tab 2.</div>
        <div id="tab3">Tab 3 is always last!</div>
      </div>
</td>
    <td><a href="javascript:void(0);" onClick="$(this).next().toggle()">[代码]</a>
      <div class="ued_box_1">
<textarea class="ued_area_1">
<div id="usual1" class="usual"> 
    <ul> 
        <li><a class="selected" href="#tab1">Tab 1</a></li> 
        <li><a href="#tab2">Tab 2</a></li> 
        <li><a href="#tab3">Tab 3</a></li> 
    </ul> 
    <div id="tab1">This is tab 1.</div> 
    <div id="tab2">More content in tab 2.</div> 
    <div id="tab3">Tab 3 is always last!</div> 
</div> 

<script type="text/javascript" src="/js/lib/SJ.js"></script>
<script type="text/javascript">
$LAB
.script("/js/lib/plugin/jquery.idTabs.js")
.wait(function(){
	$("#usual1 ul").idTabs(); 
})
</script>
</textarea>

      </div></td>
  </tr>
  <!--/list----------------------------> 
  <!--list---------------------------->
  <tr>
    <td class="title" colspan="2"> 默认高亮标签 </td>
  </tr>
  <tr>
    <td><div id="usual2" class="usual">
        <ul>
          <li><a href="#tabs1">Tab 1</a></li>
          <li><a href="#tabs2">Tab 2</a></li>
          <li><a href="#tabs3">Tab 3</a></li>
        </ul>
        <div id="tabs1">This is tab 1.</div>
        <div id="tabs2">More content in tab 2.</div>
        <div id="tabs3">Tab 3 is always last!</div>
      </div>
</td>
    <td><a href="javascript:void(0);" onClick="$(this).next().toggle()">[代码]</a>
      <div class="ued_box_1">
<textarea class="ued_area_1">
<div id="usual2" class="usual"> 
  <ul> 
    <li><a href="#tabs1">Tab 1</a></li> 
    <li><a href="#tabs2">Tab 2</a></li> 
    <li><a href="#tabs3">Tab 3</a></li> 
  </ul> 
  <div id="tabs1">This is tab 1.</div> 
  <div id="tabs2">More content in tab 2.</div> 
  <div id="tabs3">Tab 3 is always last!</div> 
</div> 

<script type="text/javascript" src="/js/lib/SJ.js"></script>
<script type="text/javascript">
$LAB
.script("/js/lib/plugin/jquery.idTabs.js")
.wait(function(){
	$("#usual2 ul").idTabs("tabs2").idTabs("!mouseover"); 
})
</script>
</textarea>
      </div></td>
  </tr>
  <!--/list----------------------------> 
  <!--list---------------------------->
  <tr>
    <td class="title" colspan="2"> javascript自动监听 </td>
  </tr>
  <tr>
    <td><div class="usual">
        <ul class="idTabs">
          <li><a href="#idTab1">Tab 1</a></li>
          <li><a href="#idTab2">Tab 2</a></li>
          <li><a href="#idTab3" class="selected">Tab 3</a></li>
        </ul>
        <div id="idTab1">This is tab 1.</div>
        <div id="idTab2">More content in tab 2.</div>
        <div id="idTab3">Tab 3 is always last!</div>
      </div></td>
    <td><a href="javascript:void(0);" onClick="$(this).next().toggle()">[代码]</a>
      <div class="ued_box_1">
<textarea class="ued_area_1">
<div class="usual"> 
  <ul class="idTabs"> 
    <li><a href="#idTab1">Tab 1</a></li> 
    <li><a href="#idTab2">Tab 2</a></li> 
    <li><a href="#idTab3" class="selected">Tab 3</a></li> 
  </ul> 
  <div id="idTab1">This is tab 1.</div> 
  <div id="idTab2">More content in tab 2.</div> 
  <div id="idTab3">Tab 3 is always last!</div> 
</div>

<script type="text/javascript" src="/js/lib/SJ.js"></script>
<script type="text/javascript">
$LAB
.script("/js/lib/plugin/jquery.idTabs.js")
</script>
</textarea>
      </div></td>
  </tr>
  <!--/list---------------------------->
  
</table>
<br />
<br />
</body>
</html>
